<template>
  <!-- 学生评价 -->
  <div id="tag3" class="commonWrap stuComment">
    <span class="info-title">学生评价:</span>
    <div class="stuComment-wrap" v-for="item in data" :key="item">
      <img class="stuIcon" :src="item.icon" />
      <div class="comment">
        <div class="comment-title">
          <div class="stuName">{{ item.userName }}</div>
          <van-rate v-model="item.rateValue" :size="15" color="#ffd21e" />
        </div>
        <div class="comment-content">{{ item.content }}</div>
        <div class="comment-about">
          <div class="releaseTime">发表于{{ item.releaseTime }}</div>
          <div class="popularity" @click="Addthumb">
            <van-icon name="good-job" size="12px">{{
              item.popularity
            }}</van-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup() {},
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.stuComment {
  &-wrap {
    display: flex;
    padding-bottom: 20px;
    img {
      width: 60px;
    }
    .comment {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-title {
        font-size: 8px;
        display: flex;
        .stuName {
          margin-right: 10px;
        }
      }
      &-content {
        font-size: 12px;
      }
      &-about {
        display: flex;
        color: #999999;
        justify-content: space-between;
        font-size: 8px;
      }
    }
  }
}
</style>